<template>
	<view class="container">
		<view class="np-header">
			<view class="np-header-user">
				<view class="np-user">
					<image class="np-avatar" :src="userInfo.avatar_url || '/static/images/missing-face.png'"></image>
					<view class="np-user-info">
						<text class="np-username">{{userInfo.nickname}}</text>
						<text class="np-level" @click="navTo('/pages/user/level')">{{userInfo.level}} (点击查看会员权益)</text>
					</view>
				</view>
				<view class="np-setting" @click="navTo('/pages/user/setting')">
					<!-- #ifdef H5/APP-PLUS -->
					<text class="np-icon npIcon-setting"></text>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN || MP-QQ -->
					<text class="np-line"></text>
					<text class="np-icon npIcon-setting"></text>
					<!-- #endif -->
				</view>
			</view>
		
			<view class="np-header-box" v-if="globalConfig.setting && globalConfig.setting.is_rebate == 1">
					<view class="np-header-box-l">
						<view class="np-money">
							<text class="np-money-num">{{userInfo.account.user_money}}</text>
							<text>帐户余额</text>
						</view>
					</view>
					<view class="np-header-box-r" @click="navTo('/pages/user/cash')">
						提现
					</view>
			</view>
			<view class="np-header-box" v-else>
				<text class="np-header-box-tip">点击下方【我的海报】可以邀请您的朋友一起省钱哦！</text>
			</view>
		</view>
		<view class="np-container">
			<block v-if="globalConfig.setting && globalConfig.setting.is_rebate == 1">
				<view class="np-box np-radius-bottom">
					<view class="np-item">
						<text class="np-item-num">{{teamOrderCount.last_month || 0}}</text>
						<text>上月预估</text>
					</view>
					<view class="np-item">
						<text class="np-item-num">{{teamOrderCount.month || 0}}</text>
						<text>本月预估</text>
					</view>
					<view class="np-item">
						<text class="np-item-num">{{teamOrderCount.today || 0}}</text>
						<text>今日预估</text>
					</view>
					<view class="np-item">
						<text class="np-item-num">{{teamOrderCount.yesterday || 0}}</text>
						<text>昨日预估</text>
					</view>
				</view>
				<view class="np-tip">
					<view class="np-tip-text">
						<text>每月21日结算【上月预估】金额</text>
					</view>
				</view>
				<view class="np-box np-radius np-margin">
					<view class="np-item" @click="navTo('/pages/user/order?status=0')">
						<text class="nuopianfont npIcon-daifahuo"></text>
						<text>已付款</text>
					</view>
					<view class="np-item" @click="navTo('/pages/user/order?status=1')">
						<text class="nuopianfont npIcon-daiqueren"></text>
						<text>待结算</text>
					</view>
					<view class="np-item" @click="navTo('/pages/user/order?status=2')">
						<text class="nuopianfont npIcon-yishouhuo"></text>
						<text>已结算</text>
					</view>
					<view class="np-item" @click="navTo('/pages/user/order?status=3')">
						<text class="nuopianfont npIcon-shouhou"></text>
						<text>已失效</text>
					</view>
				</view>
			</block>
			<view class="np-cell" :class="[globalConfig.setting && globalConfig.setting.is_rebate ? 'np-radius' : 'np-radius-bottom']">
				<np-list-cell v-if="globalConfig.show_tb_auth && globalConfig.setting && globalConfig.setting.is_rebate == 1 && (!userInfo.relation_id)" icon="npIcon-taobao" iconColor="#ff5500"
				 title="渠道授权" :tips="!userInfo.relation_id ? '请尽快进行渠道授权' : ''" @eventClick="navTo('/pages/user/auth')"></np-list-cell>
				<np-list-cell icon="npIcon-fav" iconColor="#54b4ef" title="我的收藏" @eventClick="navTo('/pages/user/fav')"></np-list-cell>
				<np-list-cell v-if="globalConfig.setting && globalConfig.setting.level > 0" icon="npIcon-tuandui" iconColor="#ff7000" title="我的团队" :teamcount="teamOrderCount.team_count"
				 @eventClick="navTo('/pages/user/team')"></np-list-cell>
				<np-list-cell icon="npIcon-share" iconColor="#9789f7" title="我的海报" :tips="globalConfig.setting && globalConfig.setting.level > 0 ? '邀请好友成为您的团队成员' : ''"
				  @eventClick="navTo('/pages/user/share')"></np-list-cell>
				<!-- #ifdef MP-WEIXIN-->
				<np-list-cell icon="npIcon-shouji" iconColor="#13227a" title="绑定手机" tips="绑定手机可用于H5/APP登录" @eventClick="navTo('/pages/user/binding')"></np-list-cell>
				<!-- #endif -->
				<np-list-cell icon="npIcon-wenti" iconColor="#13227a" title="常见问题" @eventClick="navTo('/pages/user/help')"></np-list-cell>
				<!-- #ifdef MP-WEIXIN -->
				<np-list-cell isButtom="true" icon="npIcon-kefu" iconColor="#ff0080" title="联系客服"></np-list-cell>
				<!-- #endif -->
				<np-list-cell icon="npIcon-clear" iconColor="#9d9d9d" title="清除缓存" @eventClick="clearCache"></np-list-cell>
			</view>
		</view>
	</view>
</template>

<script>
	import base from '@/common/base.js';
	export default {
		mixins: [base],
		props: {
			teamOrderCount: {
				type: Object,
				default: ()=>{
					return {}
				}
			}
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			clearCache() {
				this.$http.get('api/default/config').then((result) => {
					uni.setStorageSync('CONFIG', result.config);
					uni.setStorageSync('tplPageSetting', result.settingData.tpl);
					uni.setStorageSync('superCate', result.settingData.super_cate);
					// #ifdef H5
					uni.setStorageSync('tabbar', result.settingData.tabbar);
					// #endif
					this.setGlobalConfig(result.config);
					// #ifdef MP-WEIXIN || MP-QQ
					this.resetConfig(result.config);
					this.setReloadIndex(true);
					// #endif
					this.$config.toast("清除完成");	
				}).catch((error) => {});
			},
			resetConfig(config){
				uni.getStorage({
					key: "userInfo",
					success: (res) => {
						let userInfo = res.data;
						if (userInfo.account.user_money > 0 && config.wechat_mod == 0) {
							config.wechat_mod = 1;
							this.setGlobalConfig(config);
						}
					}
				});
			}
		}
	}
</script>

<style>
	.container {
		background: #EEEEEE;
		padding-bottom: 100rpx;
	}
	.np-header {
		display: flex;
		flex-direction: column;
		background-image: url('@/static/images/user.jpg');
		padding: 100rpx 30rpx 0;
	}
	
	.np-header-user {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.np-user {
		flex: 1;
		height: 180rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.np-avatar {
		width: 130rpx;
		height: 130rpx;
		border: 5rpx solid #fff;
		border-radius: 50%;
	}
	
	.np-user-info {
		flex: 1;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
	}
	
	.np-username {
		font-size: 44rpx;
		color: #FFFFFF;
		margin-bottom: 10rpx;
	}
	
	.np-level {
		font-size: 24rpx;
		color: #FFFFFF;
	}
	
	.np-setting {
		display: flex;
		flex-direction: column;
	}
	
	.np-icon {
		margin-right: 10rpx;
		font-size: 44rpx;
		color: #FFFFFF;
	}
	
	.np-line {
		height: 40rpx;
	}
	
	.np-header-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #f7d680;
		background: linear-gradient(left, rgba(0, 0, 0, .7), rgba(0, 0, 0, .8));
		border-radius: 16rpx 16rpx 0 0;
		overflow: hidden;
		width: 100%;
		padding: 20rpx 24rpx;
	}
	
	.np-header-box-l {
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: 20rpx;
	}
	
	.np-money {
		display: flex;
		flex-direction: column;
	}
	
	.np-money-num {
		font-size: 32rpx;
	}
	
	.np-money-num::before {
		content: "¥";
		font-size: 80%;
		margin-right: 4upx;
	}
	
	.np-header-box-tip {
		font-size: 24rpx;
	}
	
	.np-container {
		padding: 0 30rpx;
	}
	
	.np-box {
		display: flex;
		justify-content: space-around;
		background: #FFFFFF;
	}
	
	.np-item {
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		color: #75787d;
	}
	
	.np-item-num {
		font-size: 32rpx;
		color: #303133;
		margin-bottom: 8rpx;
	}
	
	.np-item-num::before {
		content: "¥";
		font-size: 80%;
		margin-right: 4rpx;
	}
	
	.np-tip {
		display: flex;
		flex-direction: column;
	}
	
	.np-tip-text {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
		color: #999999;
		padding: 10rpx 0;
	}
	
	.np-cell {
		background: #FFFFFF;
	}
	
	.np-radius {
		border-radius: 16rpx;
	}
	
	.np-radius-bottom {
		border-radius: 0 0 16rpx 16rpx;
	}
	
	.np-margin {
		margin-bottom: 20rpx;
	}
	
	.nuopianfont {
		font-size: 48rpx;
		color: #fa436a;
		margin-bottom: 8rpx;
	}
</style>
